﻿@using DevExpress.Blazor

<div class="demo-description">
    <h2><DemoNavLink Link="Popup#Overview" />Overview</h2>
    <p>
        The <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxPopup">Popup</a> component is a pop-up window that overlays the current view. It consists of a header with a <b>Close</b> button, the pop-up body, and a footer (optional).
        To specify the pop-up body's content, use the <a class="helplink" target="_blank" href="https://docs.microsoft.com/en-us/aspnet/core/blazor/components?view=aspnetcore-3.0#child-content">ChildContent</a> property.
    </p>
</div>

<div class="card demo-card demo-card-shadow">
    <div class="card-body p-0">
        <div @onclick="@(() => PopupVisible = true)">
            <div class="target-container"></div>
        </div>
        <DxPopup HeaderText="Header"
                 @bind-Visible="@PopupVisible">
            <Content>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet metus vel nisi blandit tincidunt vel efficitur purus. Nunc nec turpis tempus, accumsan orci auctor, imperdiet mauris. Fusce id purus magna.</p>
            </Content>
        </DxPopup>
    </div>
</div>

<CodeSnippet_Popup />

@code {
    bool PopupVisible { get; set; } = false;
}
